<template>
  <div class="container">
    <el-dialog title="题目预览" :visible="showPreview" @close="btnCancle">
      <!-- 题目标签 -->
      <el-row type="flex" justify="space-between" class="margin-bottom">
        <el-col>
          【题型】: {{ questionDetails.questionType | parseQuestionType }}
        </el-col>
        <el-col> 【编号】: {{ questionDetails.id }} </el-col>
        <el-col>
          【难度】: {{ questionDetails.difficulty | parseDifficulty }}
        </el-col>
        <el-col> 【标签】: {{ questionDetails.tags }} </el-col>
      </el-row>
      <el-row type="flex" justify="start" class="margin-bottom">
        <el-col :span="6"> 【学科】: {{ questionDetails.subjectID }} </el-col>
        <el-col :span="6"> 【目录】: {{ questionDetails.catalogID }} </el-col>
        <el-col :span="6">
          【企业方向】: {{ questionDetails.direction }}
        </el-col>
      </el-row>
      <hr />
      <!-- 题干 -->
      <el-row> 【题干】： </el-row>
      <el-row style="color: blue">
        <p v-html="questionDetails.question"></p>
      </el-row>
      <!-- 单选题 -->
      <div class="multiple-choice" v-if="questionDetails.questionType === '1'">
        <el-row>单选题 选项 ：( 以下选中的选项为正确答案 ) </el-row>
        <template>
          <el-radio-group v-model="multipleChoice" class="margin-bottom">
            <el-radio
              v-for="(item, i) in questionDetails.options"
              :key="i"
              :label="item.code"
              >{{ item.title }}</el-radio
            >
          </el-radio-group>
        </template>
      </div>
      <!-- 多选题 -->
      <div
        class="multiple-choice"
        v-else-if="questionDetails.questionType === '2'"
      >
        <el-row>多选题 选项 ：( 以下选中的选项为正确答案 ) </el-row>
        <template>
          <el-checkbox-group v-model="checkList">
            <el-checkbox
              v-for="(item, i) in questionDetails.options"
              :key="i"
              :label="item.code"
              >{{ item.title }}</el-checkbox
            >
          </el-checkbox-group>
        </template>
      </div>
      <hr />
      <!-- 参考答案 -->
      <el-row>
        【参考答案】:
        <el-button type="danger" @click="showVideo = !showVideo">视频答案预览</el-button>
        <video
          v-if="showVideo && questionDetails.videoURL"
          class="video"
          src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"
          controls="controls"
        ></video>
      </el-row>
      <!-- 点击（视频答案预览）按钮时，按钮的下方显示视频播放器且开始播放解析视频 -->
      <hr />
      <!-- 答案解析 -->
      <el-row style="margin: 0">
        【答案解析】：
        <p
          style="display: inline-block; margin: 0; padding: 0"
          v-html="questionDetails.answer"
        ></p>
      </el-row>
      <hr />
      <!-- 题目备注 -->
      <el-row style="margin: 20px 0">
        【题目备注】：{{ questionDetails.remarks }}
      </el-row>
      <!-- footer 关闭按钮 -->
      <template slot="footer">
        <el-button type="primary" @click="btnCancle">关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { detail } from '@/api/hmmm/questions'
export default {
  name: 'Preview',
  props: {
    showPreview: {
      required: true,
      default: false
    }
  },
  data () {
    return {
      multipleChoice: 'A', // 单选选项结果
      checkList: [], // 多选选项结果
      questionDetails: {}, // 试题详情数据
      showVideo: false // 控制viedo
    }
  },
  created () {
  },
  methods: {
    // 关闭弹层事件句柄
    btnCancle () {
      this.$emit('update:showPreview', false)
      this.questionDetails = {}
      this.multipleChoice = ''
      this.checkList = []
    },
    // 获取试题详情数据
    async getQuestionDetails (id) {
      const { data } = await detail({ id })
      this.questionDetails = data
      // 单选、多选数据回显
      this.checkList = this.questionDetails.options.filter(item => item.isRight === 1).map(item => item.code)
      this.multipleChoice = this.questionDetails.options.filter(item => item.isRight === 1).map(item => item.code)[0]
    }
  }
}
</script>

<style scoped lang='scss'>
.el-checkbox-group,
.el-radio-group {
  display: flex;
  flex-direction: column;
  .el-checkbox,
  .el-radio {
    margin-top: 20px;
  }
}
.margin-bottom {
  margin-bottom: 20px;
}

.video {
  display: block;
  width: 60%;
  height: 300px;
  margin: 20px 0;
}
</style>
